<template>
  <KView class="sys-home-circle">
    <template v-if="isShow">
      <home-circle-theme :themes="themeList" @theme-click="toThemePage"></home-circle-theme>
      <KView class="sys-home-circle-line"></KView>
      <KView class="sys-home-circle-zone">
        <circle-zone-view :has-log="true" ref="zoneView" :pagination="pagination" :circle-list="circleZoneList" :next-data-fun="setCircleZoneList"></circle-zone-view>
      </KView>
    </template>
  </KView>
</template>

<script>
  import SystemUtil from 'utils/systemUtil';

  import HomeCircleTheme from './homeCircleTheme';
  import CircleZoneView from 'views/sysCircle/components/circleZoneView';

  import Pagination from 'models/pagination';
  import SysCircleApi from 'services/sysCircleApi';
  import sysCircleMixins from 'mixins/sysCircleMixins';

  export default {
    mixins: [sysCircleMixins],

    data() {
      return {
        isShow: false,
        isMiniprogram: process.env.isMiniprogram,
        themeList: [],
        pagination: null
      };
    },

    created() {
      let pagination = new Pagination();
      SystemUtil.showLoading();
      window.Promise.all([
        this.setThemeList(),
        this.setCircleZoneList(true, pagination)
      ]).then(() => {
        this.pagination = pagination;
        this.isShow = true;
        SystemUtil.hideLoading();
      }).catch((error) => {
        SystemUtil.hideLoading();
      });
    },

    methods: {
      setThemeList() {
        return SysCircleApi.getThemeData(10).then(themeList => {
          this.themeList = themeList;
          return themeList;
        });
      },

      setCircleZoneList(isInit = false, pagination = null) {
        if (pagination === null) {
          pagination = this.pagination;
        }

        return SysCircleApi.getCircleZoneData(pagination, 0).then(circleZoneList => {
          return this.resetCircleZoneList(circleZoneList, isInit);
        });
      },

      getShareData(id) {
        return this.$refs['zoneView'].getShareData(id);
      },

      toThemePage(theme) {
        let url = '';
        if (theme === null) {
          url = '/circleThemePage';
        } else {
          url = `/circleThemePage?theme=${theme.text}`;
        }

        if (this.isMiniprogram) {
          window.open(url);
        }
      },

      resetCircleZoneById(circleZone) {
        let circle = this.getCircleZoneObjById(circleZone.spaceId);
        if (circle !== null) {
          circle.resetCircleStatusData(circleZone);
        }
      },

      resetCircleZoneLogById(logData){
        let circle = this.getCircleZoneObjById(logData.spaceId);
        if (circle !== null) {
          circle.resetCircleLogStatusData(logData);
        }
      },

      resetCircleZoneLog(spaceId){
        let circle = this.getCircleZoneObjById(spaceId);
        if (circle !== null) {
          this.$refs['zoneView'].resetCircleZoneLog(circle);
        }
      }
    },

    components: {
      HomeCircleTheme,
      CircleZoneView
    }
  };

</script>

<style lang="scss">
  .sys-home-circle {
    font-size: formatPx(26);

    .sys-home-circle-line {
      height: 1px;
      margin-top: formatPx(30);
      margin-bottom: formatPx(30);
      background: #DADADA;
    }

    .sys-home-circle-zone {
      margin: 0 formatPx(-30);
    }
  }

</style>
